﻿<!doctype html>
<html>
<head>
<title>mosaic</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles/common.css" rel="stylesheet" />
</head>
<body>
<div class="op">
	<input id="additem" type="button" value="addItem" />

</div>
<div class="prolist clearfix" id="gridContent">
	<div class="item">
		<a href="#"><img src="images/ext/1.jpg" alt="" /></a>
		<div class="datails">
			<h6>Sloppy Art - A Mess of Inspiration</h6>
			<p>via the Nonsense Society (image credit: Florian)</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/2.jpg" alt="" /></a>
		<div class="datails">
			<h6>Multi-Display Setup With Four Systems, A Wall of Screens, And 64TB Of Storage</h6>
			<p>vvia Desktopped</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/3.jpg" alt="" /></a>
		<div class="datails">
			<h6>Mounted iMac And Desk Mod With Computer Components Built In</h6>
			<p>via Desktopped</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/4.jpg" alt="" /></a>
		<div class="datails">
			<h6>I Am Not Human - Unique Self Portraits</h6>
			<p>via the Nonsense Society (photo credit: Dan Deroches)</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/5.jpg" alt="" /></a>
		<div class="datails">
			<h6>Sloppy Art - A Mess of Inspiration</h6>
			<p>via the Nonsense Society (image credit: Florian</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/6.jpg" alt="" /></a>
		<div class="datails">
			<h6>One Mighty Roar Office</h6>
			<p>via Officeal</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/1.jpg" alt="" /></a>
		<div class="datails">
			<h6>Sloppy Art - A Mess of Inspiration</h6>
			<p>via the Nonsense Society (image credit: Florian)</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/2.jpg" alt="" /></a>
		<div class="datails">
			<h6>Multi-Display Setup With Four Systems, A Wall of Screens, And 64TB Of Storage</h6>
			<p>vvia Desktopped</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/3.jpg" alt="" /></a>
		<div class="datails">
			<h6>Mounted iMac And Desk Mod With Computer Components Built In</h6>
			<p>via Desktopped</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/4.jpg" alt="" /></a>
		<div class="datails">
			<h6>I Am Not Human - Unique Self Portraits</h6>
			<p>via the Nonsense Society (photo credit: Dan Deroches)</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/5.jpg" alt="" /></a>
		<div class="datails">
			<h6>Sloppy Art - A Mess of Inspiration</h6>
			<p>via the Nonsense Society (image credit: Florian</p>
		</div>
	</div>
	<div class="item">
		<a href="#"><img src="images/ext/6.jpg" alt="" /></a>
		<div class="datails">
			<h6>One Mighty Roar Office</h6>
			<p>via Officeal</p>
		</div>
	</div>

</div><!--/prolist-->

<div id="w" style="height:20px; background:#EEE;" class="s">w</div>

<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/jquery.easing.1.3.js"></script>
<script src="scripts/jquery.vgrid.0.1.7.js"></script>
<script>
$(function(){
	var hsort_flg = false;
	//setup
	var vg = $("#gridContent").vgrid({
		easeing: "easeOutQuint",
		time: 800,
		delay: 60,
		fadeIn: {
			time: 500,
			delay: 100
		},
		forceAnim: 1
	});

	//add item
	$("#additem").click(function(e){
		var _item = $('<div class="item"><a href="#"><img src="images/ext/2.jpg" alt="" /></a><div class="datails"><h6>Multi-Display Setup With Four Systems, A Wall of Screens, And 64TB Of Storage</h6><p>vvia Desktopped</p></div></div>')
			.hide()
			.addClass(Math.random() > 0.3 ? 'wn' : 'wl')
			.addClass(Math.random() > 0.3 ? 'hn' : 'hl');
		vg.prepend(_item);
		vg.vgrefresh(null, null, null, function(){
			_item.fadeIn(300);
		});
		hsort_flg = true;
	});
});
      
</script>
</body>
</html>